<template>
    <div class="container" :style="'height: '+docheight+'px'">
        <leftcont></leftcont>
        <div class="righCont">
            <topcont></topcont>
            <div class="content">
                <div class="setCont">
                  <div class="mainTop">
                    <div class="mainTitle">编辑保洁员</div>
                    <btn value="返回列表" @click="backfn"></btn>
                  </div>
                  <div class="formCont">
                    <el-form :model="userInfo" ref="userInfo" :rules="rules" label-width="120px">
                      <el-form-item label="保洁员头像" v-if="userInfo.cleaning_head_img">
                        <cropperCom @successCropper="getHeadImg" :propImg="userInfo.cleaning_head_img"></cropperCom>
                      </el-form-item>
                      <el-form-item label="保洁员昵称" prop="cleaning_nick_name">
                        <el-input v-model="userInfo.cleaning_nick_name"></el-input>
                      </el-form-item>
                      <el-form-item label="微信号" prop="cleaning_wechat">
                        <el-input v-model="userInfo.cleaning_wechat"></el-input>
                      </el-form-item>
                      <el-form-item label="手机号" prop="cleaning_mobile">
                        <el-input :maxlength="11" v-model="userInfo.cleaning_mobile"></el-input>
                      </el-form-item>
                      <el-form-item label="保洁员状态">
                        <el-radio v-model="userInfo.cleaning_status" :label="1">正常</el-radio>
                        <el-radio v-model="userInfo.cleaning_status" :label="2">禁用</el-radio>
                      </el-form-item>
                      <el-form-item label="关联套餐">
                        <div class="cateBox">
                            <div :class="item.check?'cateItem cateActive':'cateItem'" @click="chckCateFn(item)" :key="index" v-for="(item,index) in packArr">{{ item.package_name }}</div>
                        </div>
                      </el-form-item>
                      <el-form-item label="保洁员姓名" prop="cleaning_name">
                        <el-input v-model="userInfo.cleaning_name"></el-input>
                      </el-form-item>
                      <el-form-item label="身份证号" prop="cleaning_idcard">
                        <el-input :maxlength="18" v-model="userInfo.cleaning_idcard"></el-input>
                      </el-form-item>
                      <el-form-item label="保证金" prop="earnest_money">
                        <el-input :maxlength="5" v-model="userInfo.earnest_money"></el-input>
                      </el-form-item>
                      <el-form-item label="保洁员描述" prop="cleaning_introduce">
                        <el-input type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            v-model="userInfo.cleaning_introduce">
                        </el-input>
                      </el-form-item>
                      <el-form-item label="">
                        <btn value="保存" @click="saveFn"></btn>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import leftcont from '@/components/leftCont.vue'
  import topcont from '@/components/topCont.vue'
  import btn from '@/components/public/btn.vue'
  import defUpImg from '@/components/public/defUpImg.vue'
  import { operateSave,checkPackage,editShowTech} from '@/http/api'
  import cropperCom from '@/components/public/cropperCom.vue'

    export default {
      components: {cropperCom,leftcont,topcont,btn,defUpImg},
      data() {
        var checkName = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入保洁员名称'));
            }else{
                return callback()
            }
        };
        var checkcleaning_introduce = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入保洁员描述'));
            }else{
                return callback()
            }
        };
        var checkNickName = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入保洁员昵称'));
            }else{
                return callback()
            }
        };
        var check_cleaning_wechat = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入微信号'));
            }else{
                return callback()
            }
        };
        var check_cleaning_mobile = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入手机号'));
            }else if(!this.$converData.checkPhone(value)){
              return callback(new Error('手机号格式有误'));
            }else{
                return callback()
            }
        };
        var check_cleaning_idcard = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入身份证号'));
            }else if(value.length!=18){
              return callback(new Error('身份证号必须为18位数'));
            } else{
                return callback()
            }
        };
        var check_earnest_money = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入保证金'));
            } else{
                return callback()
            }
        };
        
        return {
            packArr:[],
            userInfo:{
              cleaning_name:'',
              cleaning_introduce:'',
              cleaning_nick_name:'',
              cleaning_wechat:'',
              cleaning_mobile:'',
              cleaning_status:1,
              cleaning_head_img:'',
              domestic_package_id:'',
              cleaning_idcard:'',
              earnest_money:'',
            },
            rules: {
                cleaning_name: [
                    { validator: checkName,required: true,trigger: 'blur' }
                ],
                cleaning_introduce:[
                    { validator: checkcleaning_introduce,required: true,trigger: 'blur' }
                ],
                cleaning_nick_name:[
                    { validator: checkNickName,required: true,trigger: 'blur' }
                ],
                cleaning_wechat:[
                  { validator: check_cleaning_wechat,required: true,trigger: 'blur' }
                ],
                cleaning_mobile:[
                  { validator: check_cleaning_mobile,required: true,trigger: 'blur' }
                ],
                cleaning_idcard:[
                  { validator: check_cleaning_idcard,required: true,trigger: 'blur' }
                ],
                earnest_money:[
                  { validator: check_earnest_money,required: true,trigger: 'blur' }
                ],
                
            }
        }
      },
      props: {},
      methods:{
        backfn(){
          this.$router.back()
        },
        chckCateFn(item){
          item.check = !item.check
        },
        getHeadImg(src){
          this.userInfo.cleaning_head_img = src
        },
        getPachStr(){
          let arr = []
          for(var i=0;i<this.packArr.length;i++){
            if(this.packArr[i].check){
              arr.push(this.packArr[i].package_id)
            }
          }
          return arr.join(',')
        },
        saveFn(){
          let packStr = this.getPachStr()
          if(!packStr){
            this.$message('请选择关联套餐')
            return false
          }
          this.userInfo.domestic_package_id = packStr
            this.$refs['userInfo'].validate((valid) => {
                if (valid) {
                  this.Submit()
                } else {
                    return false;
                }
            })
        },
        Submit(){
          let data = this.userInfo
          let loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.7)'
          });
          operateSave(data).then((res) => {
            if(res.data.code==1){
              this.$message({
                message: '编辑成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.back()
              }, 1500);
            }else{
              this.$message(res.data.msg)
            }
            loading.close();
          }).catch(()=>{
            loading.close();
            this.$message('网络请求超时');
          })
        },
        getPack(idStr){
          checkPackage().then((res)=>{
            let idArr =idStr.split(',')
            if(res.data.code==1){
              for(let i  = 0; i < res.data.data.length; i++){
                res.data.data[i]['check'] = false
                if(idArr.length>0){
                    for(let k = 0;k<idArr.length;k++){
                        if(idArr[k]==res.data.data[i].package_id){
                            res.data.data[i]['check'] = true
                        }
                    }
                }
              }
              this.packArr = res.data.data //把最新的数组赋值给tableData
            }else{
              this.$message(res.data.msg)
            }
          }).catch((err)=>{
            console.log(err)
            this.$message('服务器请求超时');
          })
        },
        getData(){
            let data ={
                cleaning_id:this.$route.query.id
            }
            editShowTech(data).then((res) => {
                if(res.data.code==1){
                    let resData = res.data.data
                    this.userInfo = {
                        cleaning_id:this.$route.query.id,
                        cleaning_name:resData.cleaning_name,
                        cleaning_introduce:resData.cleaning_introduce,
                        cleaning_nick_name:resData.cleaning_nick_name,
                        cleaning_wechat:resData.cleaning_wechat,
                        cleaning_mobile:resData.cleaning_mobile,
                        cleaning_status:resData.cleaning_status,
                        cleaning_head_img:resData.cleaning_head_img,
                        domestic_package_id:resData.domestic_package_id,
                        cleaning_idcard:resData.cleaning_idcard,
                        earnest_money:resData.earnest_money,
                    }
                    this.getPack(resData.domestic_package_id)
                }else{
                    this.$message(res.data.msg)
                }
            }).catch(()=>{
            this.$message('网络请求超时');
          })
        }
      },
      mounted(){
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .container{
    width: 100%;
    display: flex;
    overflow: hidden;
    .righCont{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 15px;
      height: 100%;
      width: 10px;
      background-color: #F4F8FF;
      .content{
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        overflow: auto;
        .setCont{
          width: 100%;
          padding: 20px;
          box-sizing: border-box;
          background-color: #fff;
          .mainTop{
            display: flex;
            margin-bottom: 25px;
            align-items: center;
            justify-content: space-between;
            .mainTitle{
              font-size: 14px;
              font-weight: bold;
            }
          }
          .formCont{
            width: 600px;
            .cateBox{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                padding-top: 5px;
                .cateItem{
                    line-height: 32px;
                    border-radius: 5px;
                    padding: 0 20px;
                    margin-bottom: 15px;
                    margin-right: 15px;
                    background-color: #ebebeb;
                    color: #666;
                    cursor: pointer;
                }
                .cateActive{
                  background-color: #3273f6;
                  color: white;
                }
            }
          }
        }
      }
    }
}
  </style>
  <style>
  .el-collapse-item__wrap{
    border-bottom: none;
  }
  .el-collapse{
    border-top: none;
    border-bottom: none;
  }
  .content { overflow: -moz-scrollbars-none; }
  .content::-webkit-scrollbar { width: 0 !important }
  .content { -ms-overflow-style: none; }
 
</style>
<style>
.formImg .el-form-item__content{
 line-height: normal !important;;
}
</style>



